<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" href="/layui/css/layui.css"  media="all" />
</head>
<body>
<div class="layui-form" style="width: 600px; height: 300px; border:solid #00FFFF 1px; margin: 0 auto; margin-top: 20px; ">
<form class="layui-form" action="/user/login">

    <blockquote class="layui-elem-quote layui-text" style="margin-bottom: 20px;">
    <h1 id="test">登录界面</h1>
    <a th:href="@{/}">返回首页</a>
</blockquote>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-inline">
                    <input type="tel" name="username" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-inline">
                    <input type="tel" name="password" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item" style="">
            <div class="layui-inline" style="margin-left: 50px;">
                <button class="layui-btn"> 登  录 </button>
                <a class="layui-btn" id="register" href="/user/toRegister">去注册</a>
                <a class="layui-btn" id="admin" onclick="test()" >管理员登录</a>
                <a class="layui-btn" id="fan" style="display:none;" onclick="test1()" >普通登录</a>
            </div>
        </div>
</form>
</div>
<script src="/layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->

<script>
    var $;
    layui.use('table', function(){
        $ = layui.$ //重点处
            ,layer = layui.layer;
        var table = layui.table;
    });

    function test() {
        $('#register').hide();
        $('#admin').hide();
        $('#fan').show();
        $('#test').html("管理员登录");
    }

    function test1() {
        $('#register').show();
        $('#admin').show();
        $('#fan').hide();
        $('#test').html("登录界面");
    }
</script>

</body>
</html>